{% extends "base.html" %}

{% block title %}用户注册 - 风之宿{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
        用户注册
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        或
        <a href="{% url 'user:user_login' %}" class="font-medium text-primary hover:text-primary/80">
          已有账户？登录
        </a>
      </p>
    </div>
    <form class="mt-8 space-y-6" method="POST">
    {% csrf_token %}
      <div class="space-y-4">
        <div>
          <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
          <input id="username" name="username" type="text" required
                 class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                 placeholder="请输入用户名">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
          <input id="password" name="password" type="password" required
                 class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                 placeholder="请输入密码">
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
          <input id="email" name="email" type="email" required
                 class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                 placeholder="请输入邮箱">
        </div>
        <div>
          <label for="phone" class="block text-sm font-medium text-gray-700">电话</label>
          <input id="phone" name="phone" type="tel"
                 class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                 placeholder="请输入电话号码">
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          注册
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}